<template>
    <div class="ablumBox" >
        <div class="info" v-for="(a,i) in ablum" :key="i"> 
            <div class="pic">
                <div class="bg"></div>
                <img v-lazy="a.picUrl" alt="">
            </div>
            <div class="intros">
                <span>{{a.name}}</span>
                <span>{{a.artist.name}}</span>
                <span>发行时间：{{a.releaseDate ? a.releaseDate.split('T')[0] : '未知'}}</span>
            </div>
        </div>  
        <el-pagination background layout="prev, pager, next" 
        :page-size="pageSize" :total="total - 0"
        @current-change="changePage">
                            
        </el-pagination>      
    </div>
</template>

<script>

export default {
   
    data() {
        return {
            info: '',
            ablum: '',
            total: '',
            pageSize: 30,
        }
    },
    created(){
        this.getInfo(this.$route.params.id)
        this.getAblum(this.$route.params.id,1)
    },
    methods: {
        changePage(page){
            this.$router.push(`/singer/${this.$route.params.id}/?pageNo=${page}`)
            this.getAblum(this.$route.params.id,page)
        },
        getInfo(id){
            this.axios.get(`https://music.taihe.com/v1/artist/info?artistCode=${id}`).then((res) => {
                this.info = res.data.data
            })
        },
        getAblum(id,page){
            page = page-1   
            this.axios.get(`https://autumnfish.cn/artist/album?id=${id}&limit=30&offset=${page}`).then((res) => {
                this.ablum = res.data.hotAlbums
                this.total = res.data.artist.albumSize
            })
        }
    },
}
</script>


<style scoped>
 .ablumBox{
        width: 80vw;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .ablumBox .info{
        width: 16%;
        margin: 20px;
    }
    .ablumBox .pic{
        width: 192px;
        height: 192px;
        position: relative;
    }
    .ablumBox .pic img{
        width: 100%;
        height: 100%;
    }
     .ablumBox .pic .bg{
        width: 192px;
        height: 192px;
        position: absolute;
        left: 30px;
        z-index: -1;
        transition: all .3s;
        background-image: url(../assets/play.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .ablumBox .pic:hover .bg{
        left: 40px;
    }
    
   
    .intros{
        display: flex;
        flex-direction: column;
    }
    .intros span{
        margin-top: 6px;
    }
    .intros span:nth-child(1){
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .intros span:not(:first-child){
        color: #909399;
    }


     .el-pagination{
         width: 80vw;
         margin: 0 auto;
        display: flex;
        justify-content: center;
        padding-top: 50px;
    }

    .el-pagination{
        display: flex;
        justify-content: center;
        padding-top: 50px;
    }
</style>